<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-row :gutter="20">
                        <el-col :span="15">
                            <div class="grid-content bg-purple">
                                <img src='../../../assets/images/userImg/userImg.png' class="user-img" />
                                <div class="user-content">
                                    <p>{{ this.user.nickname }}</p>
                                    <p><i class="el-icon-collection-tag"><i class="username">优质传媒作者</i></i></p>
                                    <p class="font">相见恨晚</p>
                                    <el-button type="primary" plain size="mini">编辑</el-button>
                                </div>
                            </div>
                        </el-col>

                        <el-col :span="6">
                            <div class="grid-content bg-purple">
                                <el-breadcrumb separator="/">
                                    <div class="fan">
                                        <el-breadcrumb-item>粉丝(3)</el-breadcrumb-item>
                                        <el-breadcrumb-item>关注(4)</el-breadcrumb-item>
                                        <el-breadcrumb-item>获赞(1)</el-breadcrumb-item>
                                    </div>
                                </el-breadcrumb>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div class="user-body">
                        <p class="user-center">个人中心</p>
                        <el-divider></el-divider>
                        <p><i class="el-icon-user"></i> 个人简介 </P>
                        <p><i class="el-icon-edit-outline"></i> 发帖 </P>
                        <p><i class="el-icon-document"></i> 收藏 </p>
                        <p><i class="el-icon-thumb"></i> 粉丝 </p>
                        <p><i class="el-icon-circle-plus-outline"></i> 关注 </p>
                    </div>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="grid-content bg-purple">
                    <div class="user-content-right">
                        <h1>简介</h1> <el-button type="primary" round class="right">操作</el-button>
                        <el-divider></el-divider>
                        <table class="user-Info">
                            <tr>
                                <td><i class="el-icon-picture-outline"></i>头像</td>
                                <td> <img src='@/assets/images/userImg/userImg.png' class="user-mini-img" /></td>
                                <td><i class="el-icon-user"></i>昵称</td>
                                <td>{{ this.user.nickname }}</td>
                                <td><i class="el-icon-timer"></i>年龄</td>
                                <td>{{ this.user.userAge }}</td>
                            </tr>
                            <tr>
                                <td><i class="el-icon-male">/</i><i class="el-icon-female"></i>性别</td>
                                <td><el-button type="primary">{{ (this.user.userSex == 0 ? "男" : "女") }}</el-button></td>
                                <td><i class="el-icon-message"></i>邮箱Email</td>
                                <td>{{ this.user.userEmail }}</td>
                                <td><i class="el-icon-phone"></i>手机号</td>
                                <td>{{ this.user.userPhone }}</td>
                            </tr>
                            <tr>
                                <td><i class="el-icon-location-information"></i>地区</td>
                                <td>四川宜宾</td>
                                <td><i class="el-icon-office-building">/</i><i class="el-icon-female"></i>职业</td>
                                <td>学生</td>
                                <td><i class="el-icon-orange"></i>兴趣爱好</td>
                                <td>打篮球</td>
                            </tr>
                            <tr>
                                <td><i class="el-icon-edit"></i>个性签名</td>
                                <td>相见恨晚</td>
                                <td><i class="el-icon-date"></i>注册日期</td>
                                <td>2022-01-11 13:14</td>
                                <td><i class="el-icon-potato-strips"></i>生日</td>
                                <td>2002-01-11 13:14</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-col>
        </el-row>



    </div>
</template>
<script>
const options = {
    data() {
        return {
            nickname: '',
            userEmail: '',
            userPhone: '',
            userAge: '',
            userSex: '',
        }
    },
    computed: {
        user() {
            return JSON.parse(localStorage.getItem("user"));
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            console.log(this.user.nickname);
        }
    }
}

export default options;

</script>

<style>
.grid-content {
    border-radius: 100px;
    min-height: 150px;
}

.bg-purple-dark {
    background: #409EFF;
}

.user-img {
    float: left;
    margin-top: 1%;
    margin-left: 2%;
    max-height: 130px;
    line-height: center;
    border-radius: 65px;
}

.user-content {
    float: left;
    margin-left: 15px;
}

.el-icon-collection-tag {
    color: yellow;
}

.username {
    font-size: 14px;
    color: blue;
}

.font {
    color: #909399;
    font-size: 13px;
}

.fan {
    margin-top: 15%;
    margin-left: 10%;
    font-size: 20px;
}

.user-body {
    margin-top: 1%;
    float: left;
    background-color: #fff;
    border: 1px solid pink;
    min-height: 450px;
    min-width: 150px;
    border-radius: 30px;
    /* box-shadow: 0px 0px 0px 2px pink; */
}

.user-body p {
    display: blok;
    margin-top: 20%;
    color: #909399;
    vertical-align: middle;
    text-align: center;
}

.user-body p:hover {
    background-color: #409EFF;
}

.user-center {
    font-size: 18px;
    background: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia) 0 / 5em;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.user-content-right {
    margin-left: 2%;
    margin-top: 1%;
    float: left;
    background-color: #fff;
    border: 1px solid pink;
    min-height: 450px;
    /* min-width: 60%; */
    border-radius: 30px;
    padding: 10px;
}

.right {
    float: right;
    margin-top: -60px;
}

.user-Info {
    /* border: 1px solid #909399; */
    text-align: center;
    border-collapse: collapse;
    color: #909399;
    vertical-align: middle;
    /* margin: 5% 0 0 5%; */
    margin-top: 5%;

}

table,
td,
th {
    border: .1px solid #909399;
    padding: 15px;
}

.user-mini-img {
    max-height: 50px;
    line-height: center;
    border-radius: 65px;
}
</style>